iT邦幫忙

2023 iThome 鐵人賽

DAY 21
0
Modern Web

三十天持續努力挑戰py系列 第 21

Day_21 用JavaScript做一個小遊戲

  • 分享至 

  • xImage
  •  
  • 今天要教學的是用JS寫一款自己的網頁小遊戲,這是我在學習前期所自己練習的。
  • 會用到html、js、css,這邊先把html程式碼貼上。
<!DOCTYPE html>
<html>
<head>
  <title>貪食蛇</title>
  <link rel="stylesheet" href="mystyle.css">
</head>
<body>
  <p>Score: <span id="score"></span></p> <!-- 顯示分數 -->
  <div class="container"> <!-- 遊戲區域 -->
    <div id="game-board"> <!-- 遊戲畫面 -->
      <img id="Image" src="" alt="隨機圖片"> <!-- 隨機圖片 -->
      <div id="player"></div>  <!-- 貪食蛇 -->
      <div id="target"></div> <!-- 目標 -->
    </div>
    <button id="bt1">switch</button> <!-- 切換圖片按鈕 -->
    <script src="myjs.js"></script> <!-- 引入js -->
  </div>
</body>
</html>
  • 可以看到,html的部分相當簡單,那是因為主要的程式碼都會在JS上面,html僅僅是給他document可以抓取而已,每行都有註解,就不多講其作用。
  • 這邊再貼上css樣式:
#game-board {
  width: 400px;
  height: 400px;
  border: 1px solid black;
  position: relative;
}

#player {
  width: 50px;
  height: 50px;
  background-color: blue;
  position: absolute;
  top: 0;
  left: 0;
}

#target {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
}

#randomImage {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
}
.container {
  margin: 0;
  padding: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
}


button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #b30000;
}

button:active {
  background-color: #710080;
}

button:disabled {
  background-color: #e9ecef;
  color: #6c757d;
  cursor: not-allowed;
}

#Image{
  width: 400px;
  max-height: 100%;
  position: relative;
  top: 0;
  left: 0;
}
  • 主要設定玩家大小、目標大小、遊玩範圍、button的小效果,以及更換背景圖片的圖片。

  • 接下來進入重點,js的部分,是其最多也最複雜的部份。我一步一步講解,首先要把html裡的元素讓js能抓取到,只用的方法不外乎就是getElementById之類的。

var gameBoard = document.getElementById('game-board');
var player = document.getElementById('player');
var target = document.getElementById('target');
var scoreElement = document.getElementById('score');

設定初值:

var playerX = 0;
var playerY = 0;
var score = 0;

寫目標物生成的函數:

function target_generate() {
  var targetX = Math.floor(Math.random() * (gameBoard.offsetWidth - target.offsetWidth));
  var targetY = Math.floor(Math.random() * (gameBoard.offsetHeight - target.offsetHeight));
  target.style.top = targetY + 'px';
  target.style.left = targetX + 'px';
}
target_generate();

寫判斷玩家+1分的函式,也就是玩家碰到目標物。

function areElementsTouching(element1, element2) {
  const rect1 = element1.getBoundingClientRect();
  const rect2 = element2.getBoundingClientRect();

  const isTouching = !(rect2.left > rect1.right ||
    rect2.right < rect1.left ||
    rect2.top > rect1.bottom ||
    rect2.bottom < rect1.top);

  return isTouching;
}

接下來就剩玩家移動,與執行target_generate()的function。

function movePlayer(event) {
  var key = event.keyCode;
  var step = 5;

  switch (key) {
    case 37: // Left arrow
      playerX -= step;
      break;
    case 38: // Up arrow
      playerY -= step;
      break;
    case 39: // Right arrow
      playerX += step;
      break;
    case 40: // Down arrow
      playerY += step;
      break;
  }


  player.style.top = playerY + 'px';
  player.style.left = playerX + 'px';

  if (areElementsTouching(player, target)) {
    target_generate();
    score = score + 1;
    scoreElement.innerHTML = score;
  }

}

這樣基本上就完成了,剩下一些美化的部分,我下面把全部的程式碼貼上。

var gameBoard = document.getElementById('game-board');
var player = document.getElementById('player');
var target = document.getElementById('target');
var scoreElement = document.getElementById('score');

var playerX = 0;
var playerY = 0;
var score = 0;


function target_generate() {
  var targetX = Math.floor(Math.random() * (gameBoard.offsetWidth - target.offsetWidth));
  var targetY = Math.floor(Math.random() * (gameBoard.offsetHeight - target.offsetHeight));
  target.style.top = targetY + 'px';
  target.style.left = targetX + 'px';
}
target_generate();

function movePlayer(event) {
  var key = event.keyCode;
  var step = 5;

  switch (key) {
    case 37: // Left arrow
      playerX -= step;
      break;
    case 38: // Up arrow
      playerY -= step;
      break;
    case 39: // Right arrow
      playerX += step;
      break;
    case 40: // Down arrow
      playerY += step;
      break;
  }


  player.style.top = playerY + 'px';
  player.style.left = playerX + 'px';

  if (areElementsTouching(player, target)) {
    target_generate();
    score = score + 1;
    scoreElement.innerHTML = score;
  }

}

function areElementsTouching(element1, element2) {
  const rect1 = element1.getBoundingClientRect();
  const rect2 = element2.getBoundingClientRect();

  const isTouching = !(rect2.left > rect1.right ||
    rect2.right < rect1.left ||
    rect2.top > rect1.bottom ||
    rect2.bottom < rect1.top);

  return isTouching;
}


document.addEventListener('keydown', movePlayer);


const  imgElement = document.getElementById('Image');

const imageUrls = [
  'img1.jpg',
  'img2.jpg',
  'img3.jpg',

];

var i = 0;

function img_generate() {
  const InedxImageUrl = imageUrls[i++ % imageUrls.length];
  imgElement.src = InedxImageUrl;
}

const myButton = document.getElementById('bt1');
img_generate();

myButton.addEventListener('click', function () {
  img_generate();
});

圖片必須自己放。
然後可以發現,這樣玩家是可以超出到遊戲範圍外面的,因為我忘記寫了XD。


上一篇
Day_20 Button With Bootstrap
下一篇
Day_22 Dropdwons With Bootstrap
系列文
三十天持續努力挑戰py30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言